<template>
  <!-- 方案的新建和修改弹出的对话框 -->
  <div class="auto-scheme">
    <el-dialog v-model="state.dialogVisible" :before-close="handleClose" width="40%" height="80%">
      <template #header>
        <div class="my-header">
          <div class="title-hr"></div>
          <div>
            <span class="title-top">地图加载</span>
          </div>
        </div>
      </template>

      <div class="scheme-box">
        <el-table :data="state.bottomData" style="width: 100%">
          <el-table-column prop="disTypeName" label="调度类型" width="width" align="center">
          </el-table-column>
          <el-table-column prop="prop" label="水文预报成果" width="width" align="center">
            <template #default="{ row }">
              <!-- <font class="iconfont" title="加载计算成果" @click="handleLoadingToMap(row)"
                >&#xe629;</font
              > -->
              <!-- <el-button
                type="primary"
                v-if="!state.loading && row.status != 2 && row.status != 5"
                @click="handleLoadingToMap(row)"
              >
                加载
              </el-button>
              <el-button
                type="success"
                v-if="!state.loading && (row.status == 2 || row.status == 5)"
                @click="handleLoadingToMap(row)"
              >
                加载
              </el-button>
              <el-button type="primary" loading v-if="state.loading"> 加载中 </el-button> -->
              <el-button
                type="primary"
                v-if="!row.loading && row.status != 2 && row.status != 5"
                @click="handleLoadingToMap(row)"
              >
                加载
              </el-button>
              <el-button
                type="primary"
                v-if="!row.loading && (row.status == 2 || row.status == 5)"
                @click="handleLoadingToMap(row)"
              >
                加载
              </el-button>
              <el-button type="primary" loading v-if="row.loading"> 加载中 </el-button>
            </template>
          </el-table-column>
          <el-table-column label="水动力成果" width="width" align="center">
            <template #default="{ row }">
              <!-- <el-button
                type="primary"
                v-if="row.status == 5 && !state.showSdlResToMap"
                @click="handleSdlResToMap(row)"
              >
                加载
              </el-button>
              <el-button type="primary" loading v-if="state.showSdlResToMap"> 加载中 </el-button>
              <el-button
                type="primary"
                v-if="row.status == 2 && !state.showSdlComputToMap"
                @click="handleSdlComputToMap(row)"
              >
                水动力计算
              </el-button>

              <el-button type="primary" loading v-if="state.showSdlComputToMap"> 计算中 </el-button> -->
              <el-button
                type="primary"
                v-if="row.status == 5 && !row.showSdlResToMap"
                @click="handleSdlResToMap(row)"
              >
                加载
              </el-button>
              <el-button type="primary" loading v-if="row.showSdlResToMap || row.status == 4">
                加载中
              </el-button>

              <el-button
                type="primary"
                v-if="row.status == 2 && !row.showSdlComputToMap"
                @click="handleSdlComputToMap(row)"
              >
                水动力计算
              </el-button>

              <el-button type="primary" loading v-if="row.showSdlComputToMap"> 计算中 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <!-- <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">保存</el-button>

          <el-button @click="handleClose()">取消</el-button>
        </span> -->
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatMsToDate } from '@/utils/index'
import { divGraphicYellow } from '@/utils/mapUtils'
import { useDispatchManage } from '@/store/modules/dispatch-manage.js'
import { storeToRefs } from 'pinia'
import { childrenSchemes, getEigResult, ifmsCalculate } from '@/services/modules/dispatch-manage'
const state = reactive({
  showSdlResToMap: false,
  showSdlComputToMap: false,
  loading: false,
  loadingScheme: [],
  radioGroup: [],
  models: [],
  childrenSchemes: [],
  disabledFlag: false,
  // 表格数据
  bottomData: [],
  // 父方案id
  fatherId: ''
})
const ruleFormRef = ref(null)
// 选择的模型类型
function handleRadioLable(i) {
  storeToRefs(useDispatchManage()).lableVal.value = i
  state.bottomData = []
  state.childrenSchemes.forEach((e) => {
    if (e.modelName == i) {
      state.bottomData.push({
        label: e.disTypeName,
        id: e.disType,
        status: e.status,
        scid: e.scid
      })
    }
  })
}
// 水文预报
function handleLoadingToMap(row) {
  row.loading = true
  getEigResult({ scid: row.scid, blkcd: '' }).then((res) => {
    if (res.code === 200) {
      row.loading = false
      handleClose()
      if (res.data.length) {
        let arr = []
        arr = res.data.filter((item) => {
          return item.import == 1
        })
        divGraphicYellow(useDispatchManage().map, arr, 'import')
        storeToRefs(useDispatchManage()).secRes.value = res.data
        console.log(res.data, '水文加载')
        storeToRefs(useDispatchManage()).scid.value = row.scid

        storeToRefs(useDispatchManage()).swTime.value = [row.startTime, row.endTime, arr[0].fcTime]
        storeToRefs(useDispatchManage()).status.value = row.status
      }
    }
  })
  //  divGraphicYellow(mapInstance, 'import')
  console.log('loadingScheme', state.loadingScheme)
}
function handleSdlResToMap(row) {
  row.showSdlResToMap = true
  getEigResult({ scid: row.scid, blkcd: '' }).then((res) => {
    if (res.code === 200) {
      row.showSdlResToMap = false

      if (res.data.length) {
        let arr = []
        arr = res.data.filter((item) => {
          return item.import == 1
        })
        // divGraphicYellow(useDispatchManage().map, arr, 'import')
        // storeToRefs(useDispatchManage()).secRes.value = res.data
        storeToRefs(useDispatchManage()).scCode.value = row.scCode
        storeToRefs(useDispatchManage()).swTime.value = [row.startTime, row.endTime]
        storeToRefs(useDispatchManage()).scid.value = row.scid
        handleClose()
      }
    }
  })

  console.log('loadingScheme', state.loadingScheme)
}
function handleSdlComputToMap(item) {
  item.showSdlComputToMap = true
  ifmsCalculate({ scid: item.scid }).then((res) => {
    if (res.code === 200) {
      loadingSchemeList()
      item.showSdlComputToMap = false
    }
  })
}
function loadingSchemeList() {
  childrenSchemes({ scid: state.fatherId, scBelong: 0 }).then((res) => {
    if (res.code === 200) {
      let arr = []
      let array = []
      state.childrenSchemes = res.data
      res.data.forEach((item, index) => {
        arr.push({ label: item.modelName, id: item.model })
        array.push({
          label: item.disTypeName,
          id: item.disType,
          status: item.status,
          scid: item.scid
        })
      })
      state.models = arr.filter((item, index) => arr.findIndex((i) => i.id === item.id) === index)
      state.radioGroup = state.models[0].label
      handleRadioLable(state.radioGroup)
      state.bottomData = array.filter(
        (item, index) => array.findIndex((i) => i.id === item.id) === index
      )
    }
  })
}

function handleOpenModal(row) {
  // 父方案id
  state.fatherId = row.id

  state.dialogVisible = true
  state.bottomData = [row]
}
defineExpose({ handleOpenModal })
// 关闭弹框的回调
function handleClose() {
  state.dialogVisible = false
}
</script>

<style lang="less" scoped>
.auto-scheme {
  .my-header {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    height: 35px;
    border-bottom: 2px solid #eee;
    font-size: 21px;
    .title-hr {
      height: 18px;
      border: #4fc0f1 2px solid;
      margin-right: 10px;
    }
    .title-top {
      color: #4fc0f1;
    }
  }
  .radio-box {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    width: 100%;
    // background-color: rebeccapurple;
    .radio-left-title {
      font-size: 14px;
      color: #828488;
    }
    .radio-right-body {
      .ml-4 {
        margin-right: 20px;
      }
    }
  }
  :deep(.el-dialog__body) {
    padding: 10px;
  }
  .scheme-box {
    .iconfont {
      cursor: pointer;
      font-size: 22px;
      font-weight: 600;
    }
  }
}
</style>
